<template>
  <div class="subject">
    <span>{{ num1 }}</span>
    <span>+</span>
    <span>{{ num2 }}</span>
    <span>=</span>
    <input type="number" v-model.number="answer" />
    <button @click="submitAnswer">提交</button>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      num1: 0,
      num2: 0,
      answer: null,
      correctAnswer: 0,
      questions: [],
      currentQuestionIndex: 0
    };
  },
  created() {
    this.generateQuestions();
    this.generateNumbers();
  },
  methods: {
    generateQuestions() {
      this.questions = Array.from({ length: 5 }, () => {
        const num1 = Math.floor(Math.random() * 10) + 1;
        const num2 = Math.floor(Math.random() * 10) + 1;
        const correctAnswer = num1 + num2;
        return { num1, num2, correctAnswer };
      });
    },
    generateNumbers() {
      if (this.currentQuestionIndex < this.questions.length) {
        const question = this.questions[this.currentQuestionIndex];
        this.num1 = question.num1;
        this.num2 = question.num2;
        this.correctAnswer = question.correctAnswer;
      } else {
        console.log("所有题目已完成");
      }
    },
    submitAnswer() {
      const isCorrect = this.answer === this.correctAnswer;
      this.$emit('answer-submitted', { id: this.id, isCorrect });
      this.answer = null;
      this.currentQuestionIndex++;
      this.generateNumbers();
    }
  }
};
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>